<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./vue.js"></script>
</head>
<body>
<div id="app">
    <p style="font-size: 25px;">计数器：{{products.id}}</p>
    <button @click="products.id++" style="font-size:25px">Click Me!!</button>
</div>
<script>
    var myproducts = {"id": 1, name: "book", price: "20.00"};
    var vm = new Vue({
        el: app,
        data: {
            counter: 1,
            products: myproducts
        }
    });

    myproducts.qty = "1";
    console.log(vm);
    vm.$watch("counter", (nval, oval) => {
        alert(`计数器值变化：${oval} 变为 ${nval}!`)
    });

    /**
     * 在以上实例中，使用以下代码在开始时创建了一个变量 myproduct：

     var myproduct = {"id":1, name:"book", "price":"20.00"};

     该变量在赋值给了 Vue 实例的 data 对象：
     var vm = new Vue({ el: '#app', data: { counter: 1, products: myproduct } });

     如果我们想给 myproduct 数组添加一个或多个属性，我们可以在 Vue 实例创建后使用以下代码：

     vm.products.qty = "1";
     */
</script>
</body>
<body>
<div id="app2">
    <p style="font-size: 25px;">计数器：{{productes.ct}}</p>
    <button @click="productes.ct++" style="font-size:25px">Click Me!!</button>
</div>
<script>
    /**
     Vue 不允许在已经创建的实例上动态添加新的根级响应式属性。

     Vue 不能检测到对象属性的添加或删除，最好的方式就是在初始化实例前声明根级响应式属性，哪怕只是一个空值。

     如果我们需要在运行过程中实现属性的添加或删除，则可以使用全局 Vue，Vue.set 和 Vue.delete 方法。

     Vue.set 方法用于设置对象的属性，它可以解决 Vue 无法检测添加属性的限制，语法格式如下：

     Vue.set( target, key, value )

     参数说明：

     target: 可以是对象或数组
     key : 可以是字符串或数字
     value: 可以是任何类型
     */
    var myproductes = {"ct": 1, name: "book", "price": "20.00"};
    let vm2 = new Vue({
        el: app2,
        data: {
            counter: 1,
            productes: myproductes
        }
    });

    Vue.set(myproductes, 'qty', 1);
    console.log(vm2);
    vm2.$watch('counter', (nval, oval) => {
        alert(`计数器值变化：${oval} 变为 ${nval}!`)
    })
</script>
</body>

<body>
<div id="app3">
    <p style="font-size: 25px;">计数器：{{demo.id}}</p>
    <button @click="demo.id++" style="font-size:25px">Click Me!!</button>
</div>
<script>
    /**
     Vue.delete 用于删除动态添加的属性 语法格式：

     Vue.delete( target, key )

     参数说明：

     target: 可以是对象或数组
     key : 可以是字符串或数字
     */
    var myDemo= {"id": 1, name: "book", "price": "20.00"};
    let vm3 = new Vue({
        el: app3,
        data: {
            counter: 1,
            demo: myDemo
        }
    });

    Vue.delete(myDemo,'price');
    console.log(vm3);
    vm3.$watch('counter', (nval, oval) => {
        alert(`计数器值变化：${oval} 变为 ${nval}!`)
    })
</script>
</body>
</html>